<template>
  <div class="footee">
      <div class="foo" :style="{width:footerwidth}">
          <div class="foo_title">
            <h1>联系我们</h1>
            <p>CONTACT US</p>
          </div>
          <div class="ffff">
            <div class="foo_left">
                <img src="../../assets/img/foo_logo.png" alt="">
            </div>
            <div class="foo_right">
                <p>联系我们</p>
                <p>重庆高洁环境绿化工程集团有限公司</p>
                <p>地址：重庆九龙坡区二郎千叶大厦4栋25楼</p>
                <p>邮箱：</p>
                <p>网址：</p>
                <p>备案号</p>
            </div>
          </div>
          <img class="foot_wechat" src="../../assets/img/wechat.gif" alt="">
      </div>
  </div>
</template>

<script>
export default {
    computed:{
        footerwidth: ()=>{
            if(window.innerWidth>=1200){
                return 1200+'px'
            }else{
                return '100%'
            }
        }
    }
}
</script>

<style lang='less'>
.footee{
    .foo{
        margin: 0 auto;
        padding-bottom: 30px;
        background: #008D48;
        color: white;
        position: relative;
        .foo_title{
            h1{
                text-align: center;
                letter-spacing: 4px;
                padding-top: 25px;
                margin: 0;
                color: white;
            }
            p{
                text-align: center;
                
            }
        }
    }
    .ffff{
        display: flex;
        justify-content: space-between;
        width: 60%;
        .foo_left{
            margin: 0 auto;
            width: 40%;
            margin-top: 2vh;
            border-right: 1px solid white;
            height: 8vh;
        }
        .foo_right{
            width: 45%;
            font-size: 16px;
            p{
                margin: 0 0 5px 0;
            }
        }
    }
    .foot_wechat{
        width: 13vw;
        height: 30vh;
        position: absolute;
        left: 65%;
        top: 0%;
    }
}
</style>